<template>
  <div class="fault-right">

    <!-- <el-tabs v-model="activeName"> -->
      <!-- 解决方案详情页面展示 -->
      <!-- <el-tab-pane 
        :label="$t('faultLibrary.detail.faultOrderRecord')" 
        name="faultOrderRecord"
        style="padding:0 16px;"
        v-loading="loading"
      > -->
        <TaskTable v-if="rightActiveTab=='taskTableRef'"
          ref="taskTableRef" 
          :task-list="taskList" 
          :total="total"
          @getData="getData"
        />
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane 
        :label="$t('common.base.comment')" 
        name="remark"
      > -->
        <RemarkList :page-data="query" v-else/>
      <!-- </el-tab-pane> -->
    <!-- </el-tabs> -->
  </div>
</template>
          
<script>

// api
import { 
  getTaskSolutionList, // 解决方法对应工单数据查询
} from '@src/api/Fault';

import TaskTable from './TaskTable'
import RemarkList from './remarkList'
export default{
  // 故障详情页面的右边的部分（故障对象和故障描述类型）
  name:'FaultRight',
        
  data(){
    return {
      activeName:'faultOrderRecord',
      taskList:[],
      loading: false,
      total:0
    }
  },

  props: {
    query:{
      type:Object
    },
    rightActiveTab: {
      type:String
    }
  },
      
  components:{
    TaskTable,
    RemarkList
  },
        
  methods: {
    // 供父组件调用，获取表单字段和表单元素值的接口数据
    getPortPromise(){
      const { id } = this.query || {}
      let params = this.$refs.taskTableRef?.page
      return getTaskSolutionList({solutionId:id, ...params})
    },

    // 子组件调用，主要用来翻页和筛选
    async getData(){
      this.loading = true
      const res = await this.getPortPromise();
      this.loading = false
      this.setData(res)
    },

    // 供父组件调用，接口成功后的回调
    setData(res){
      const { list, total = 0 } = res.data || {}
      this.taskList = list || []
      this.total = total || 0
    },
  }
}
</script>

<style lang="scss" scoped>
  .fault-right{
    padding:16px !important;
  }
::v-deep{
  .el-table{
    border: 1px solid #EBEEF5!important;
    .table-title{
      background:#EBEEF5!important;
      .cell{
        color: #595959;
        font-size:14px;
      }
    }
    .el-table__cell .cell{
      .el-button,&{
        @include text-ellipsis();
      }
      
    }
  }
}
</style>